<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="选择维修班组"
      color="#fff"
      @leftClick="leftClick"
      @rightClick="rightClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <view class="head">
        <view class="ipt">
          <u--input
            v-model="searchKeyword"
            placeholder="请输入班组名称搜索"
            activeColor="#359"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            @change="handleSearch"
          ></u--input>
        </view>
      </view>
      <view class="port">
        <fui-table
          selection
          stripe
          :itemList="tableData"
          :header="headerData"
          @select="handleSelect"
        ></fui-table>
      </view>
      <view class="footer">
        <view class="confirm" @click="handleConfirm">确定</view>
      </view>
      <fui-safe-area></fui-safe-area>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getRepairTeamList } from "@/pages/api/subpkg_index/dispatching.js";

const searchKeyword = ref("");
const tableData = ref([]);
const selectedTeams = ref(null);

const headerData = ref([
  {
    prop: "teamName",
    label: "班组名称",
    width: "220",
  },
  {
    prop: "leaderName",
    label: "班组长",
  },
  {
    prop: "contactNumber",
    label: "联系电话",
  },
]);

const leftClick = () => {
  uni.navigateBack();
};

// 获取班组列表数据
const getTeamList = async () => {
  try {
    const res = await getRepairTeamList();
    if (res.code === 200 && res.data.records) {
      tableData.value = res.data.records;
    }
  } catch (error) {
    console.error("获取班组列表失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};

// 搜索处理
const handleSearch = () => {
  getTeamList();
};

// 选择处理
const handleSelect = (e) => {
  console.log("选中的数据:", e);
  // 如果是选中状态，保存item数据
  if (e.is_selected && e.item) {
    selectedTeams.value = e.item;
  } else {
    selectedTeams.value = null;
  }
};

// 确认选择
const handleConfirm = () => {
  if (!selectedTeams.value) {
    uni.showToast({
      title: "请选择维修班组",
      icon: "none",
    });
    return;
  }

  // 使用uni.$emit传递选中的班组数据

  uni.$emit("updateTeam", {
    selectedTeam: selectedTeams.value,
  });
  uni.navigateBack();
};

onMounted(() => {
  getTeamList();
});
</script>

<style lang="scss" scoped>
page {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.viewport {
  flex: 1;
  display: flex;
  // height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.warp {
  flex: 1;
  background-color: #f6f6f6;
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 0 20rpx 20rpx;
    // margin-bottom: 24rpx;
    .ipt {
      flex: 1;
      height: 100rpx;
      display: flex;
      align-items: center;
    }
  }
  .port {
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .confirm {
      background-color: #0052d9;
      height: 70rpx;
      border-radius: 10rpx;
      width: 80%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
